<script setup>
import { ref } from 'vue';
import { RouterLink, RouterView } from 'vue-router';

const activeLink = ref('/');

function setActiveLink(route) {
  activeLink.value = route.path;
}
</script>
<template>
  <div class="admin-template">
    <aside class="sidebar">
      <div class="logoTitle"><span class="logo-size">logo</span></div>
      <ul>
        <li>
          <RouterLink to="/" :class="{ 'active-link': activeLink === '/' }" @click="setActiveLink('/')">
            <span class="router-title">图像生成</span>
          </RouterLink>
        </li>
        <li>
          <RouterLink to="/about" :class="{ 'active-link': activeLink === '/about' }" @click="setActiveLink('/about')">
            <span class="router-title">图像增强</span>
          </RouterLink>
        </li>
        <li>
          <RouterLink to="/xunlian" :class="{ 'active-link': activeLink === '/xunlian' }" @click="setActiveLink('/xunlian')">
            <span class="router-title">检测模型训练</span>
          </RouterLink>
        </li>
        <li>
          <RouterLink to="/jiance" :class="{ 'active-link': activeLink === '/jiance' }" @click="setActiveLink($route)">
  <span class="router-title">实时监测</span>
</RouterLink>
        </li>
        <li>
          <RouterLink to="/caiyang" :class="{ 'active-link': activeLink === '/caiyang' }" @click="setActiveLink('/caiyang')">
            <span class="router-title">数据采样</span>
          </RouterLink>
        </li>
      </ul>
    </aside>
    <main class="content">
      <div>
      <div class="top-bar">
        <img alt="Logo" src="@/assets/more.png" class="logo" />
       
        <div class="icons">
          <input type="search" placeholder="搜索..." class="search-box" />
          <i class="icon icon-notification"></i>
          <i class="icon icon-settings"></i>
          <div class="profile">
          <img src="@/assets/images.png" alt="头像" class="avatar" />
          <span class="username">用户名</span>
        </div>
        </div>
        
      </div>
    </div>
    <div class="router-view">
      <RouterView />
    </div>
    
    </main>
  </div>
</template>

<style scoped>
.router-title.active-link {
  color: red;
}
.admin-template { 
  display: grid;
  grid-template-columns: 1fr 6fr; 
  /* grid-template-rows: auto 1fr; */
  height: 100%; 
  width: 100%; 
}

/* 其他样式保持不变 */

@media screen and (max-width: 768px) {
  .admin-template {
    grid-template-columns: 1fr; 
  }

  .sidebar {
    display: none; 
  }
}
header {
  grid-column: 1 / -1;  
  display: flex;
  flex-direction: column;
  background-color: #f5f5f5;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  height: 100px; /* 举例，可以根据需要调整 */
}

.top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 70px;
  padding-top: 10px;
  padding-right: 20px;
    /* background-color:gray; */
  /* padding: 0.5rem 1rem; */
}

.logo {
  margin-left: 20px;
  height: 40px;

}

.search-box {
  margin-left: 1rem;
  
}
  
.icons {
  display: flex;
  align-items: center;
}

.icon {
  margin-left: 1rem;
  /* 需要为图标添加样式 */
}

.profile {
  display: flex;
  align-items: center;
  margin-left: 1rem;
}

.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-right: 0.5rem;
}

.nav-bar {
  display: flex;
  padding: 0.5rem 1rem;
  background-color: #343957;;
  height: 100%;
}

.sidebar {
  background-color: #343957;;
  min-height: 100vh;
  width: 300px;
  /* padding: 1rem; */
}

.content {
  /* padding: 1rem; */
 
}


.sidebar ul {
  list-style-type: none; 
  padding: 0; 
  
}

.sidebar li {
  width: 100%;
  height: 50px; 
  background-color: #343957; 
  border-top: 1px solid #343957;
  border-bottom: 1px solid #343957;
  line-height: 50px; 
  text-align: left; 
  padding-left: 20px;
  color: black !important;;
}


.sidebar li:first-child {
  /* border-top: #9fa9e3 solid 1px; */
}

.sidebar li:last-child {
  border-bottom: none; 
}
.logoTitle{
width: 100%;
height: 70px;
color: #FFF;
/* background-color: aquamarine; */
}
.router-view{
  padding-left: 20px;
}
.router-title{
  
  font-size: 24px;
  color: #fff;
}
.logo-size{
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 40px;
  font-weight: 800;
}
</style>
